<template>
  <div class="container">
    <div class="app-container">
      <div class="abc">
        <div class="freight">
          <el-button type="danger" class="add" @click="addShow=true;edit=true">新增模板</el-button>
          <el-table
            :data="tableData"
            stripe
            style="width: 100%"
            :header-cell-style="{ background: '#f8faff' }"
          >
            <el-table-column
              label="模板类型"
              width="180"
            >
              <template v-slot="{row}">
                <span v-if="row.templateType===1">同城寄</span>
                <span v-else-if="row.templateType===2">省内寄</span>
                <span v-else-if="row.templateType===3">经济区互寄</span>
                <span v-else-if="row.templateType===4">跨省</span>
              </template>
            </el-table-column>
            <el-table-column
              label="运送类型"
              width="180"
            >
              <template v-slot="{row}">
                <span v-if="row.transportType===1">普快</span>
                <span v-else-if="row.transportType===2">特快</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="address"
              label="关联城市"
            >
              <template v-slot="{row}">
                <span v-if="row.associatedCityList[0]==1">全国</span>
                <span v-if="row.associatedCityList[0]==2">京津冀</span>
                <span v-if="row.associatedCityList[0]==3">江浙沪</span>
                <span v-if="row.associatedCityList[0]==4">川渝</span>
                <span v-if="row.associatedCityList[0]==5">黑吉辽</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="firstWeight"
              label="首重"
            />
            <el-table-column
              prop="continuousWeight"
              label="续重"
            />
            <el-table-column
              prop="lightThrowingCoefficient"
              label="轻抛系数"
            />
            <el-table-column label="操作">
              <template v-slot="{row}">
                <el-button type="text" size="small" style="color: skyblue;" @click="editBtn(row)">编辑</el-button>
                <span style="color: #ccc;margin: 0 5px;">|</span>
                <el-button type="text" size="small" style="color: red;" @click="del">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>

    </div>
    <el-dialog :title="edit?'新增模板':'编辑模板'" :visible.sync="addShow" width="33%" @close="close">
      <el-form ref="Form" label-width="80px" :model="addForm" :rules="rules">
        <el-form-item label="模板类型" prop="templateType">
          <el-select v-model="addForm.templateType" style="width: 433px;" placeholder="请选择模板类型" change="changeAA">
            <el-option
              v-for="item in templateTypeOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="运送类型" prop="transportType">
          <el-select v-model="addForm.transportType" style="width: 433px;" placeholder="请选择运送类型">
            <el-option
              v-for="item in transportTypeOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="关联城市" prop="associatedCityList">
          <el-checkbox-group v-if="addForm.templateType==3" v-model="checkList" @change="changeCity">
            <el-checkbox label="2">京津冀</el-checkbox>
            <el-checkbox label="3">江浙沪</el-checkbox>
            <el-checkbox label="4">川渝</el-checkbox>
            <el-checkbox label="5">黑吉辽</el-checkbox>
          </el-checkbox-group>
          <span v-else>全国</span>
        </el-form-item>
        <el-form-item label="首重价格" prop="firstWeight">
          <el-input v-model="addForm.firstWeight">
            <template #suffix><span class="trapeze">元</span></template>
          </el-input>
        </el-form-item>
        <el-form-item label="续重价格" prop="continuousWeight">
          <el-input v-model="addForm.continuousWeight">
            <template #suffix><span class="trapeze">元</span></template>
          </el-input>
        </el-form-item>
        <el-form-item label="轻抛系数" prop="lightThrowingCoefficient">
          <el-input v-model="addForm.lightThrowingCoefficient" />
        </el-form-item>
        <el-form-item style="display: flex;justify-content: center;">
          <el-button type="primary" @click="submit()">确定</el-button>
          <el-button @click="close">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

  </div>
</template>
<script>
import { getFreightList } from '@/api/freight'

export default {
  name: 'Role',
  data() {
    return {
      edit: false,
      tableData: [],
      checkList: [],
      addShow: false,
      templateTypeOptions: [
        { name: '同城寄', id: 1 },
        { name: '省内寄', id: 2 },
        { name: '经济区互寄', id: 3 },
        { name: '跨省', id: 4 }
      ],
      transportTypeOptions: [
        { name: '普快', id: 1 }
      ],
      addForm: {
        associatedCityList: [
          '1'
        ],
        'computeWeight': '',
        'continuousWeight': '',
        'created': '2019-08-24 14:15:22',
        'expense': '',
        'firstWeight': '',
        'id': '',
        'lightThrowingCoefficient': '',
        'templateType': '',
        'transportType': '',
        'updated': '2019-08-24 14:15:22'
      },
      rules: {
        templateType: [{ required: true, message: '模板类型不能为空', trigger: 'blur' }],
        transportType: [{ required: true, message: '运送类型不能为空', trigger: 'blur' }],
        // checkList: [{ validator: (rule, value, callback) => this.addForm.associatedCityList.length || this.addForm.templateType !== 3 ? callback() : callback(new Error('关联的城市不能为空')), trigger: 'blur' }],
        associatedCityList: [
          { required: true, message: '模板类型不能为空', trigger: 'blur' }
        ],
        firstWeight: [{ required: true, message: '首重价格不能为空', trigger: 'blur' }],
        continuousWeight: [{ required: true, message: '续重价格不能为空', trigger: 'blur' }],
        lightThrowingCoefficient: [{ required: true, message: '轻抛系数不能为空', trigger: 'blur' }]
      }
    }
  },
  watch: {
    checkList: {
      immediate: true,
      deep: true,
      handler() {
        if (this.addForm.templateType === 3) {
          this.addForm.associatedCityList = []
        }
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    async getList() {
      const res = await getFreightList()
      this.tableData = res.data
    },
    async submit() {
      await this.$refs.Form.validate()
      this.$message.error('很抱歉演示数据不允许修改')
    },
    changeCity() {
      this.addForm.associatedCityList = this.checkList
    },
    editBtn(row) {
      this.addShow = true
      console.log(row)
      this.addForm = row
      if (this.addForm.templateType === 3) {
        const arr = this.addForm.associatedCityList
        this.checkList = arr
        setTimeout(() => {
          this.addForm.associatedCityList = arr
        }, 0)
      }
    },
    close() {
      this.addShow = false
      this.addForm.templateType = ''
      this.addForm.transportType = ''
      this.addForm.associatedCityList = ['1']
      this.addForm.firstWeight = ''
      this.addForm.continuousWeight = ''
      this.addForm.lightThrowingCoefficient = ''
      this.getList()
    },
    del() {
      this.$confirm('确定要删除吗', '删除确认', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(() => {
        this.$message({
          type: 'error',
          message: '很抱歉演示数据不允许修改!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }
  }
}
</script>
  <style scoped>
.trapeze{
    color: black;
    margin-right: 15px;
  }
::v-deep .el-dialog__header{
  background-color: #f3f4f7;
}

  .add{
    margin: 5px 0 25px;
    border-radius: 5px;
  }
  .abc{
    padding: 25px;
    background-color: #fff;
    margin: 0 20px;
    border-radius: 5px;
  }
::v-deep .el-dialog__body{
  padding: 40px 60px;
}
  </style>

